import React from 'react';
import { StyleSheet } from 'react-native';
import { Touchable } from 'react-native-toast-message/lib/src/components/Touchable';
import { CommonStyle } from '../../../../common/commonStyle.ts';
import { Text, View } from 'native-base';

interface ITabComponentProps {
  defaultOpen: number;
  onChange: (active: number) => void;
}
const TabComponent: React.FC<ITabComponentProps> = ({ defaultOpen, onChange }) => {
  return (
    <View style={styles.tab}>
      <Touchable style={styles.tabItem} onPress={() => onChange(1)}>
        <Text style={defaultOpen === 1 ? styles.active : styles.text} fontSize={13}>
          精选
        </Text>
      </Touchable>
      <Touchable style={styles.tabItem} onPress={() => onChange(2)}>
        <Text style={defaultOpen === 2 ? styles.active : styles.text} fontSize={13}>
          全部
        </Text>
      </Touchable>
    </View>
  );
};

const styles = StyleSheet.create({
  tab: { width: '100%', backgroundColor: '#fff', flexDirection: 'row' },
  tabItem: { flex: 1, alignItems: 'center', height: 40, justifyContent: 'center' },
  text: { color: CommonStyle.lightGray, fontWeight: 'light' },
  active: { color: CommonStyle.fontColor, fontWeight: 'bold', borderBottomWidth: 2, height: '100%', borderBottomColor: CommonStyle.mainColor, paddingTop: 9 },
});

export default TabComponent;
